<template>
  <div class="environment-info container-bottom-20">
        <CardBox title="设备列表"></CardBox>
        <div class="content-container">
          <div class="device-list-layout" @click.self="showMoreMenu = false">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
              <el-menu-item index="1">{{hezeListIndex0.localName}}</el-menu-item>
            </el-menu>
            <div class="more-menu">
              <img src="@/assets/img/device-list-more.png" alt="" @click.stop="toggleMenu">
              <div class="device-list-more" v-show="showMoreMenu" @click.stop>
                <div class="device-list-more-item-title">设备名称</div>
                <div class="device-list-more-item-list">
                  <div class="device-list-more-item" v-for="item in hezeList" :key="item.id" :class="{'active': item.id === hezeListIndex0.id}" @click="handleDeviceListMoreItemClick(item)">{{ item.localName }}</div>
                </div>
              </div>
            </div>
            <div class="line"></div>
            <div class="device-list-content">
              <div class="device-list-content-item">
                <div class="device-list-content-item-title">
                  <span class="device-list-content-item-title-text">记录数</span>
                  <span class="device-list-content-item-title-value">{{hezeListIndex0.fileCountValid}}</span>
                </div>
                <div class="device-list-content-item-title">
                  <span class="device-list-content-item-title-text">可用容量</span>
                  <span class="device-list-content-item-title-value">{{hezeListIndex0.freeSpace}}%</span>
                </div>
                <div class="device-list-content-item-title">
                  <span class="device-list-content-item-title-text">信号强度</span>
                  <span class="device-list-content-item-title-value">{{hezeListIndex0.signalStrength}}</span>
                </div>
                <div class="device-list-content-item-title">
                  <span class="device-list-content-item-title-text">识别物种数</span>
                  <span class="device-list-content-item-title-value">{{hezeListIndex0.countSp}}种</span>
                </div>
                <div class="device-list-content-item-title">
                  <span class="device-list-content-item-title-text">剩余电量</span>
                  <span class="device-list-content-item-title-value">{{hezeListIndex0.battery}}%</span>
                </div>
                <div class="device-list-content-item-title">
                  <span class="device-list-content-item-title-text">温度</span>
                  <span class="device-list-content-item-title-value">{{hezeListIndex0.temperature}}℃</span>
                </div>
              </div>
              <div class="device-list-content-item">
                <div class="species-chart" ref="speciesChart"></div>
              </div>
            </div>
          </div>
        </div>
      </div>            
</template>

<script>
import CardBox from '@/components/Global/CardBox.vue'
import * as echarts from 'echarts'

export default {
  components: {
    CardBox
  },
  data() {
    return {
      hezeList:null,
      type:'heze',
      activeIndex: '1',
      showMoreMenu: false,
      hezeListIndex0:[]
    }
  },
  mounted() {
    document.addEventListener('click', this.handleClickOutside)
    this.$nextTick(() => {
      this.$api.species.getDeviceList("type").then(res => {
        console.log(res)
        this.hezeList = res;
        this.hezeListIndex0 = this.hezeList[0];
        this.initSpeciesChart()
      });

    })
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    toggleMenu() {
      this.showMoreMenu = !this.showMoreMenu;
    },
    handleClickOutside(event) {
      if (this.showMoreMenu && !event.target.closest('.more-menu')) {
        this.showMoreMenu = false;
      }
    },
    initSpeciesChart() {
      const chartDom = this.$refs.speciesChart
      if (!chartDom) return
      
      const chart = echarts.init(chartDom)
      
      const option = {
        title: {
          text: '观测物种TOP5',
          left: 'center',
          bottom: '5%',
          left:'5%',
          textStyle: {
            color: '#fff',
            fontSize: '16px',
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          bottom: '5%',
          left: '75%',
          orient: 'vertical',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: '#fff',
            fontSize: '12px'
          }
        },
        color: ['#FFB800', '#3DD78C', '#25CDE9', '#3B7EFF', '#8E65FF'],
        series: [
          {
            name: '观测物种',
            type: 'pie',
            center: ['30%', '40%'],    // 将饼图向下移动
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: false,
              position: 'center',
              color: '#fff'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold',
                color: '#fff'
              }
            },
            labelLine: {
              show: false
            },
            data: this.hezeListIndex0.datas
          }
        ]
      };
      
      chart.setOption(option)
    
    },
    handleDeviceListMoreItemClick(item) {
      // 更新当前选中的设备
      this.hezeListIndex0 = item;
      // 关闭菜单
      this.showMoreMenu = false;
      // 可以在这里添加其他逻辑，比如触发事件通知父组件
      this.$emit('device-selected', item);
    }
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleClickOutside)
  }
}
</script>

<style scoped lang="scss">
.device-list-layout {
  padding: 10px 20px;
  height: 242px;
  position: relative;
  ::v-deep(.el-menu){
    background: none;
    cursor: pointer;
    border-bottom: none;
  }
  ::v-deep(.el-menu-item),
  ::v-deep(.el-submenu){
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      color: #fff;
      background: none;
      border-bottom: none;
    }
    ::v-deep(.el-menu-item:not(.is-disabled):hover){
      background: none;
      color: #07FFE5;
    }
    ::v-deep(.el-menu-item:not(.is-disabled):focus){
      background: none;
      color: #07FFE5;
    }
  ::v-deep(.el-menu-item.is-active){
    color: #07FFE5;
    border-bottom: none;
    background: none;
  }
  .line{
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgba(55, 185, 255, 1), rgba(63, 182, 255, 0.3569),rgba(67, 180, 255, 0));
    position: relative;
    top: -10px;
  }
  .more-menu {
    position: relative;
    top: -25px;
    left: 451px;
    width: 16px;
    height: 16px;
  }
  .device-list-more {
    position: absolute;
    top: 0;
    left: 50px;
    color:#fff;
    font-size: 14px;
    background:rgba(13, 45, 111, 0.4);
    padding:10px 0 10px 24px;
    width: 184px;
    height: 238px;
  }
  .device-list-more-item-list{
    overflow-y: scroll;
    height: 208px;
    .device-list-more-item{
      line-height: 30px;
      height: 30px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .device-list-more-item:hover{
      color: #07FFE5;
      cursor: pointer;
    }
    .active{
      color: #07FFE5;
    }
  }
  .device-list-content{
    display: flex;
    justify-content: space-between;
  }
  .device-list-content-item:nth-child(1){
    width: 200px;
  }
  .device-list-content-item:nth-child(2){
    flex: 1;
  }
  .device-list-content-item-title{
    font-size: 16px;
    line-height: 30px;
  }
  .device-list-content-item-title-text{
    color: #fff;
    width: 100px;
    display: inline-block;
  }
  .device-list-content-item-title-value{
    color: #07FFE5;
    width: 55px;
    display: inline-block;
  }
}

.device-list-content-item {
  width: 100%;
  height: 200px;
  box-sizing: border-box;
}

.species-chart {
  width: 100%;
  height: 100%;
}
</style>

